<!--
 * @FilePath     : /layui/demo/1544.html
 * @Description  :  自定义`下拉选`渲染
 * @Date         : 2025-02-24 11:33
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-02-24 11:33
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <div id="demo1" class="xm-select-demo"></div>

    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      var demo1 = xmSelect.render({
        el: '.xm-select-demo',
        data: [
          { name: '张三', value: 'zhangsan', showname: '组织部-张三', selected: true },
          { name: '李四', value: 'lisi', showname: '策划部-李四', selected: true },
          { name: '王五', value: 'wangwu', showname: '运营部-王五' },
        ],

        //
        template({ item, sels, name, value }) {
          // 这里 return 的会显示在下拉选标签内容中
          return (
            item.name +
            '<span style="position: absolute; right: 10px; color: #8799a3">' +
            value +
            '</span>'
          )
        },

        prop: {
          name: 'showname',
        },
      })
    </script>
  </body>
</html>
